<template>
  <div>
    <Form :label-width="100" :model="dataToQuery">
      <Row :gutter="16" class="query-form2">
        <i-col span="8">
          <FormItem label="创建人：">
            <Input v-model="dataToQuery.userName" placeholder="请填写创建人"/>
          </FormItem>
        </i-col>
        <i-col span="8">
          <FormItem label="创建人单位：">
            <!--                <cascader-dom class="query-form-el" ref='queryOrgCascader'-->
            <!--                              @setOrgname='(orgName)=>{dataToQuery.orgName = orgName}' :orgTree="true"-->
            <!--                              :setCurrentName="{label:dataToQuery.orgName,value:dataToQuery.orgId}"></cascader-dom>-->
            <company-select v-model="dataToQuery.orgName" class="query-form-el"></company-select>
          </FormItem>
        </i-col>
        <Col span="8" v-if="switchFlag">
          <FormItem label="二级集团：">
            <two-level-org orgCode v-model="dataToQuery.twoLevelOrgId"></two-level-org>
          </FormItem>
        </Col>
        <i-col span="8" v-if="!switchFlag">
          <div style="float: right;">
            <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
            <Button class="ivu-btn-reset" style="margin-left: 10px" @click="reset">重置</Button>
            <Button @click="switchQuery(true)" style="margin-left: 5px" class="ivu-btn-switch2" type="text">展开
              <Icon type="ios-arrow-down"/>
            </Button>
          </div>
        </i-col>
      </Row>
      <Row :gutter="16" class="query-form2" v-if="switchFlag">
        <i-col span="24">
          <div style="float: right;">
            <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
            <Button class="ivu-btn-reset" style="margin-left: 10px" @click="reset">重置</Button>
            <Button @click="switchQuery(false)" style="margin-left: 10px" class="ivu-btn-switch2" type="text">收起
              <Icon type="ios-arrow-up"/>
            </Button>
          </div>
        </i-col>
      </Row>

    </Form>
    <Row type="flex" justify="start" class="query-form">
      <i-col>
        <Button icon="md-add" class="ivu-btn-add" @click="addInfo">新增</Button>
      </i-col>
      <i-col>
        <Button icon="md-cloud-download" class="ivu-btn-add" @click="downloadZip">批量下载</Button>
      </i-col>
      <i-col>
        <!--        <Button type="primary" class="ivu-btn-add" icon="md-cloud-download" @click="exportFormSubmit">导出</Button>-->
        <download-button :api="exportUrl" :query-form="dataToQuery" :export-form-before="beforeExport"/>
      </i-col>
    </Row>
    <Table ref='table' :height="tableHeight" no-data-text="没有查询到相关数据!" @on-selection-change='getSelectRows'
           :loading='pageStatus.loading' @on-sort-change="sortChange"
           border :columns="columns1" :data="dataTable">
    </Table>
    <Row type="flex" justify="end">
      <i-col span="24">
        <Page :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange"
              @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer
              show-elevator/>
      </i-col>
    </Row>
    <Modal title="安全标准化自评" :transfer=false :mask-closable="false" v-model="dialogShow" v-if="dataToView && dialogShow"
           :width=800 :styles="{height:'620px'}" class-name='limit-height-dialog'>
      <Form ref="dialogForm" :class="mode === 'view'?'modal-view-detail':'modal-form'"
            :show-message="false" :model="dataToView" :rules="mode === 'view'?{} :ruleCustom"
            :label-position="mode === 'view'?'right':'top'" :label-width="mode === 'view'?170:null">
        <Row type="flex" justify="space-around" class="code-row-bg" :gutter="16">
          <i-col span="24">
            <FormItem label="自评标准名称：" prop="standardName">
              <div v-if="mode === 'view'">{{ dataToView.standardName }}</div>
              <Input v-else type='text' v-model='dataToView.standardName'></Input>
            </FormItem>
          </i-col>
        </Row>
        <Row type="flex" justify="space-around" class="code-row-bg" :gutter="16">
          <i-col span="12">
            <FormItem label="自评等级：" prop="selfAssessmentLevel">
              <div v-if="mode === 'view'">{{ dataToView.selfAssessmentLevelName }}</div>
              <Select v-else filterable v-model="dataToView.selfAssessmentLevel"
                      class="query-form-el"
                      :label-in-value="true">
                <Option v-for="item in stdRankList" :value="item.codingCodeId"
                        :key="item.codingCodeId">{{ item.codingName }}
                </Option>
              </Select>
            </FormItem>
          </i-col>
          <i-col span="12">
            <FormItem label='自评得分：' prop='selfAssessmentScore'>
              <div v-if="mode === 'view'">{{ dataToView.selfAssessmentScore }}</div>
              <InputNumber v-else class="query-form-el" min=0 v-model='dataToView.selfAssessmentScore'></InputNumber>
            </FormItem>
          </i-col>
        </Row>
        <Row type="flex" justify="space-around" class="code-row-bg" :gutter="16">
          <i-col span="12">
            <FormItem label="自评工作组织人员：" prop="people">
              <div v-if="mode === 'view'">{{ dataToView.people }}</div>
              <Input v-else type='text' v-model='dataToView.people'></Input>
            </FormItem>
          </i-col>
          <i-col span="12">
            <FormItem label="职位：" prop="post">
              <div v-if="mode === 'view'">{{ dataToView.post }}</div>
              <Input v-else type='text' v-model='dataToView.post'></Input>
            </FormItem>
          </i-col>
        </Row>
        <Row type="flex" justify="space-around" class="code-row-bg" :gutter="16">
          <i-col span="12">
            <FormItem label="评定组成员：" prop="participant">
              <div v-if="mode === 'view'">{{ dataToView.participant }}</div>
              <Input v-else type='text' v-model='dataToView.participant'></Input>
            </FormItem>
          </i-col>
          <i-col span="12">
            <FormItem label="组织评定的最高领导职位：" prop="station">
              <div v-if="mode === 'view'">{{
                  statusList.find(obj => dataToView.station == obj.codingCodeId) != undefined ? statusList.find(obj => dataToView.station == obj.codingCodeId)['codingName'] : dataToView.station
                }}
              </div>
              <Select v-else filterable v-model="dataToView.station"
                      class="query-form-el"
                      :label-in-value="true">
                <Option v-for="item in statusList" :value="item.codingCodeId"
                        :key="item.codingCodeId">{{ item.codingName }}
                </Option>
              </Select>
            </FormItem>
          </i-col>
        </Row>
        <Row type="flex" justify="space-around" class="code-row-bg" :gutter="16">
          <i-col span="12">
            <FormItem label="公示时间：" prop="announceTime">
              <div v-if="mode === 'view'">{{ dataToView.announceTime }}</div>
              <DatePicker type="date" placeholder="请选择" class="query-form-el"
                          v-model="dataToView.announceTime" v-else></DatePicker>
            </FormItem>
          </i-col>
          <i-col span="12">
            <FormItem label="公示位置：" prop="announcePosition">
              <div v-if="mode === 'view'">{{ dataToView.announcePosition }}</div>
              <Input v-else type='text' v-model='dataToView.announcePosition'></Input>
            </FormItem>
          </i-col>
        </Row>
        <Row type="flex" justify="space-around" class="code-row-bg" :gutter="16">
          <i-col span="12">
            <FormItem label="自评报告是否经有关会议审议：" prop="selfAssessmentIfMeeting">
              <div v-if="mode === 'view'">{{
                  stdIfMeeting.find(obj => dataToView.selfAssessmentIfMeeting == obj.codingCodeId) != undefined ? stdIfMeeting.find(obj => dataToView.selfAssessmentIfMeeting == obj.codingCodeId)['codingName'] : dataToView.selfAssessmentIfMeeting
                }}
              </div>
              <Select v-else filterable v-model="dataToView.selfAssessmentIfMeeting"
                      class="query-form-el"
                      :label-in-value="true">
                <Option v-for="item in stdIfMeeting" :value="item.codingCodeId"
                        :key="item.codingCodeId">{{ item.codingName }}
                </Option>
              </Select>
            </FormItem>
          </i-col>
          <i-col span="12">
            <FormItem label="自评报告公示方法：" prop="selfAssessmentPublicityMethod">
              <div v-if="mode === 'view'">{{
                  stdPublicityMethodList.find(obj => dataToView.selfAssessmentPublicityMethod == obj.codingCodeId) != undefined ? stdPublicityMethodList.find(obj => dataToView.selfAssessmentPublicityMethod == obj.codingCodeId)['codingName'] : dataToView.selfAssessmentPublicityMethod
                }}
              </div>
              <Select v-else filterable v-model="dataToView.selfAssessmentPublicityMethod"
                      class="query-form-el"
                      :label-in-value="true">
                <Option v-for="item in stdPublicityMethodList" :value="item.codingCodeId"
                        :key="item.codingCodeId">{{ item.codingName }}
                </Option>
              </Select>
            </FormItem>
          </i-col>
        </Row>

        <Row type="flex" justify="space-around" class="code-row-bg" :gutter="16">
          <i-col span="24">
            <FormItem v-if="mode === 'view'" label="自评打分表：">
              <div v-show="dataToView.idFiles.filter(t=>t.field==='1').length>0"
                   v-for="(item,index) in dataToView.idFiles.filter(t=>t.field==='1')">
                <a @click="downloadFiles(item,index)"><span
                    style="color: #3399ff;margin-left: 5px">{{ item.fileName }}</span></a>
                <Progress v-show="uploadListVisible[item.id]"
                          :percent="uploadListPercent[index]"></Progress>
              </div>
            </FormItem>
            <FormItem v-else label="自评打分表：">
              <Upload ref="upload"
                      :before-upload="(file) => { beforeUpload1(file, 'id', 'SaStdStandardSelfAssessment/1') }"
                      :show-upload-list="true"
                      :max-size="10240"
                      multiple
                      type="drag"
                      :action="fileUrl">
                <div style="padding: 10px">
                  <Icon type="ios-cloud-upload" size="45" style="color: #3399ff"></Icon>
                  <p>点击将文件拖拽到这里上传</p>
                  <!--<span style="font-size:8px;color: #797a64">支持扩展名：.rar .zip .doc .docx .pdf...</span>-->
                </div>
              </Upload>
              <div v-show="dataToView.idFiles.filter(t=>t.field==='1').length>0"
                   v-for="(item,index) in dataToView.idFiles.filter(t=>t.field==='1')"
                   :key='item'>
                <a @click="downloadFiles(item,index)">{{ item.fileName }}</a>
                <Button type="text" icon="md-trash"
                        @click="removeFile1(item.id, 'id', 'SaStdStandardSelfAssessment/1')"
                        style="margin-left: 5px;margin-bottom: 3px"/>
                <Progress v-show="uploadListVisible[item.id]"
                          :percent="uploadListPercent[index]"></Progress>
              </div>
            </FormItem>
          </i-col>
        </Row>
        <Row type="flex" justify="space-around" class="code-row-bg" :gutter="16">
          <i-col span="24">
            <FormItem v-if="mode === 'view'" label="自评报告：">
              <div v-show="dataToView.idFiles.filter(t=>t.field==='2').length>0"
                   v-for="(item,index) in dataToView.idFiles.filter(t=>t.field==='2')">
                <a @click="downloadFiles(item,index)"><span
                    style="color: #3399ff;margin-left: 5px">{{ item.fileName }}</span></a>
                <Progress v-show="uploadListVisible[item.id]"
                          :percent="uploadListPercent[index]"></Progress>
              </div>
            </FormItem>
            <FormItem v-else label="自评报告：">
              <Upload ref="upload"
                      :before-upload="(file) => { beforeUpload1(file, 'id', 'SaStdStandardSelfAssessment/2') }"
                      :show-upload-list="true"
                      :max-size="10240"
                      multiple
                      type="drag"
                      :action="fileUrl">
                <div style="padding: 10px">
                  <Icon type="ios-cloud-upload" size="45" style="color: #3399ff"></Icon>
                  <p>点击将文件拖拽到这里上传</p>
                  <!--<span style="font-size:8px;color: #797a64">支持扩展名：.rar .zip .doc .docx .pdf...</span>-->
                </div>
              </Upload>
              <div v-show="dataToView.idFiles.filter(t=>t.field==='2').length>0"
                   v-for="(item,index) in dataToView.idFiles.filter(t=>t.field==='2')"
                   :key='item'>
                <a @click="downloadFiles(item,index)">{{ item.fileName }}</a>
                <Button type="text" icon="md-trash"
                        @click="removeFile1(item.id, 'id', 'SaStdStandardSelfAssessment/2')"
                        style="margin-left: 5px;margin-bottom: 3px"/>
                <Progress v-show="uploadListVisible[item.id]"
                          :percent="uploadListPercent[index]"></Progress>
              </div>
            </FormItem>
          </i-col>
        </Row>
        <Row type="flex" justify="space-around" class="code-row-bg" :gutter="16">
          <i-col span="24">
            <FormItem v-if="mode === 'view'" label="自评问题整改情况附件：">
              <div v-show="dataToView.idFiles.filter(t=>t.field==='3').length>0"
                   v-for="(item,index) in dataToView.idFiles.filter(t=>t.field==='3')">
                <a @click="downloadFiles(item,index)"><span
                    style="color: #3399ff;margin-left: 5px">{{ item.fileName }}</span></a>
                <Progress v-show="uploadListVisible[item.id]"
                          :percent="uploadListPercent[index]"></Progress>
              </div>
            </FormItem>
            <FormItem v-else label="自评问题整改情况附件：">
              <Upload ref="upload"
                      :before-upload="(file) => { beforeUpload1(file, 'id', 'SaStdStandardSelfAssessment/3') }"
                      :show-upload-list="true"
                      :max-size="10240"
                      multiple
                      type="drag"
                      :action="fileUrl">
                <div style="padding: 10px">
                  <Icon type="ios-cloud-upload" size="45" style="color: #3399ff"></Icon>
                  <p>点击将文件拖拽到这里上传</p>
                  <!--<span style="font-size:8px;color: #797a64">支持扩展名：.rar .zip .doc .docx .pdf...</span>-->
                </div>
              </Upload>
              <div v-show="dataToView.idFiles.filter(t=>t.field==='3').length>0"
                   v-for="(item,index) in dataToView.idFiles.filter(t=>t.field==='3')"
                   :key='item'>
                <a @click="downloadFiles(item,index)">{{ item.fileName }}</a>
                <Button type="text" icon="md-trash"
                        @click="removeFile1(item.id, 'id', 'SaStdStandardSelfAssessment/3')"
                        style="margin-left: 5px;margin-bottom: 3px"/>
                <Progress v-show="uploadListVisible[item.id]"
                          :percent="uploadListPercent[index]"></Progress>
              </div>
            </FormItem>
          </i-col>
        </Row>
        <Row type="flex" justify="space-around" class="code-row-bg" :gutter="16">
          <i-col span="24">
            <FormItem v-if="mode === 'view'" label="职代会汇报：">
              <div v-show="dataToView.idFiles.filter(t=>t.field==='4').length>0"
                   v-for="(item,index) in dataToView.idFiles.filter(t=>t.field==='4')">
                <a @click="downloadFiles(item,index)"><span
                    style="color: #3399ff;margin-left: 5px">{{ item.fileName }}</span></a>
                <Progress v-show="uploadListVisible[item.id]"
                          :percent="uploadListPercent[index]"></Progress>
              </div>
            </FormItem>
            <FormItem v-else label="职代会汇报：" prop="idFiles">
              <Upload ref="upload"
                      :before-upload="(file) => { beforeUpload1(file, 'id', 'SaStdStandardSelfAssessment/4') }"
                      :show-upload-list="true"
                      :max-size="10240"
                      multiple
                      type="drag"
                      :action="fileUrl">
                <div style="padding: 10px">
                  <Icon type="ios-cloud-upload" size="45" style="color: #3399ff"></Icon>
                  <p>点击将文件拖拽到这里上传</p>
                  <!--<span style="font-size:8px;color: #797a64">支持扩展名：.rar .zip .doc .docx .pdf...</span>-->
                </div>
              </Upload>
              <div v-show="dataToView.idFiles.filter(t=>t.field==='4').length>0"
                   v-for="(item,index) in dataToView.idFiles.filter(t=>t.field==='4')"
                   :key='item'>
                <a @click="downloadFiles(item,index)">{{ item.fileName }}</a>
                <Button type="text" icon="md-trash"
                        @click="removeFile1(item.id, 'id', 'SaStdStandardSelfAssessment/3')"
                        style="margin-left: 5px;margin-bottom: 3px"/>
                <Progress v-show="uploadListVisible[item.id]"
                          :percent="uploadListPercent[index]"></Progress>
              </div>
            </FormItem>
          </i-col>
        </Row>
        <Row type="flex" justify="space-around" class="code-row-bg" :gutter="16">
          <i-col span="24">
            <FormItem label='自评报告公示：' prop='selfAssessmentProblemDesc'>
              <div v-if="mode === 'view'">{{ dataToView.selfAssessmentProblemDesc }}</div>
              <Input v-else type='textarea' v-model='dataToView.selfAssessmentProblemDesc'></Input>
            </FormItem>
          </i-col>
        </Row>
        <Row type="flex" justify="space-around"
             class="code-row-bg">
          <Col span="24">
            <FormItem label="公示照片：" prop="id1Files">
              <div class="demo-upload-list" v-for="(item,index) in dataToView.id1Files" :key="index">
                <img :src="uploadUrl+'/'+item.id">
                <div class="demo-upload-list-cover">
                  <Icon type="ios-eye-outline" @click.native="handleView(item.id)"></Icon>
                  <Icon type="ios-trash-outline" v-if="mode !== 'view'"
                        @click.native="removeFile1(item.id, 'id', 'picture')"></Icon>
                </div>
              </div>
              <Upload
                  v-if="mode !== 'view'"
                  ref="upload"
                  :show-upload-list="false"
                  :format="['jpg','jpeg','png','gif']"
                  accept="image/jpg, image/jpeg,image/png,image/gif,image/bmp"
                  :max-size="1024"
                  :before-upload="(file) => { beforeUpload1(file, 'id', 'picture') }"
                  multiple
                  type="drag"
                  :action="uploadUrl"
                  style="display: inline-block;width:58px;">
                <div style="width: 58px;height:58px;line-height: 58px;">
                  <Icon type="ios-camera" size="20"></Icon>
                </div>
              </Upload>
            </FormItem>
          </Col>
        </Row>
        <Row type="flex" justify="space-around" class="code-row-bg" :gutter="16">
          <i-col span="24">
            <FormItem v-if="mode === 'view'" label="安全标准化外部评审档案：">
              <div v-show="dataToView.idFiles.filter(t=>t.field==='5').length>0"
                   v-for="(item,index) in dataToView.idFiles.filter(t=>t.field==='5')">
                <a @click="downloadFiles(item,index)"><span
                    style="color: #3399ff;margin-left: 5px">{{ item.fileName }}</span></a>
                <Progress v-show="uploadListVisible[item.id]"
                          :percent="uploadListPercent[index]"></Progress>
              </div>
            </FormItem>
            <FormItem v-else label="安全标准化外部评审档案：">
              <Upload ref="upload"
                      :before-upload="(file) => { beforeUpload1(file, 'id', 'SaStdStandardSelfAssessment/5') }"
                      :show-upload-list="true"
                      :max-size="10240"
                      multiple
                      type="drag"
                      :action="fileUrl">
                <div style="padding: 10px">
                  <Icon type="ios-cloud-upload" size="45" style="color: #3399ff"></Icon>
                  <p>点击将文件拖拽到这里上传</p>
                  <!--<span style="font-size:8px;color: #797a64">支持扩展名：.rar .zip .doc .docx .pdf...</span>-->
                </div>
              </Upload>
              <div v-show="dataToView.idFiles.filter(t=>t.field==='5').length>0"
                   v-for="(item,index) in dataToView.idFiles.filter(t=>t.field==='5')"
                   :key='item'>
                <a @click="downloadFiles(item,index)">{{ item.fileName }}</a>
                <Button type="text" icon="md-trash"
                        @click="removeFile1(item.id, 'id', 'SaStdStandardSelfAssessment/5')"
                        style="margin-left: 5px;margin-bottom: 3px"/>
                <Progress v-show="uploadListVisible[item.id]"
                          :percent="uploadListPercent[index]"></Progress>
              </div>
            </FormItem>
          </i-col>
        </Row>
        <Row type="flex" justify="space-around" class="code-row-bg" :gutter="16">
          <i-col span="12">
            <FormItem label='创建人：' prop='remarks'>
              <div v-if="mode === 'view'">{{ dataToView.createUserName }}</div>
              <Input v-else readonly v-model='dataToView.createUserName'></Input>
            </FormItem>
          </i-col>
          <i-col span="12">
            <FormItem label='创建人单位：' prop='remarks'>
              <div v-if="mode === 'view'">{{ dataToView.companyName }}</div>
              <Input v-else readonly v-model='dataToView.companyName'></Input>
            </FormItem>
          </i-col>
        </Row>
      </Form>
      <div slot="footer">
        <Button v-if="mode != 'view'" type="primary" class='ivu-btn-save' @click="submit('dialogForm')">确定</Button>
        <Button v-if="mode != 'view'" type="primary" class='ivu-btn-cancel' @click="handleCancel">取消</Button>
        <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
      </div>
    </Modal>
    <div v-show="downloading"
         style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:99999;background-color:#000000;opacity:0.5;">
      <svg-bar style="position:absolute;top:50%;left:50%;margin-left:-100px;margin-top:-100px"
               :options="options" :value="batchProcess"></svg-bar>
    </div>
  </div>
</template>

<script>
import {formatDate} from '@/tools/index'
import pageCommonFunction from '@/components/pageCommonFunction.js'
import {sessionStorage} from '@/common/cacheUtils.js';
import {Api} from '@/api/index.js'
import svgBar from 'svg-progress-bar'

var cascaderDom = () => import('@/components/cascader-dom.vue');
export default {
  name: "SaStdStandardSelfAssessment",
  components: {
    svgBar, cascaderDom
  },
  data() {
    return {
      ...this.createCommonDataField(),
      switchFlag: false,
      exportUrl: Api.exportSaStdStandardSelfAssessment,
      tableHeight: 10,
      stdRankList: [],
      stdIfMeeting: [],
      stdPublicityMethodList: [],
      statusList: [],
      columns1: [
        {title: '序号', width: 80, fixed: 'left', align: 'center', render: this.indexColumnsRender},
        {key: 'companyName', title: '创建人所属单位', align: 'center', minWidth: 200},
        {key: 'selfAssessmentLevelName', title: '自评等级', align: 'center', minWidth: 120},
        {key: 'selfAssessmentScore', title: '自评得分', align: 'center', minWidth: 120},
        {key: 'standardName', title: '自评标准名称', align: 'center', minWidth: 200},
        {key: 'userName', title: '创建人', align: 'center', minWidth: 120},
        // {key: 'orgName', title: '创建人所属公司', align: 'center', minWidth: 200},
        {
          key: 'createDate',
          title: '创建时间',
          align: 'center',
          minWidth: 200,
          sortable: "custom",
          render: this.renderCellDate
        },
        this.getActionColumns(),
      ],
      ruleCustom: {
        selfAssessmentProblemDesc: [{required: true, message: '请填写自评问题整改情况', trigger: 'blur, change'}],
        selfAssessmentLevel: [{required: true, message: '请填写自评等级', trigger: 'blur, change'}],
        selfAssessmentScore: [{required: true, message: '请填写自评得分', trigger: 'blur, change', type: 'number'}],
        standardName: [{required: true, message: '请填写自评标准名称', trigger: 'blur, change'}],
        post: [{required: true, message: '请填写职位', trigger: 'blur, change'}],
        station: [{required: true, message: '请填写岗位', trigger: 'blur, change'}],
        announcePosition: [{required: true, message: '请填写公示位置', trigger: 'blur, change'}],
        announceTime: [{
          validator: (rule, value, callback) => {
            if (value == null || value == '' || value == undefined) {
              callback('请填写公示时间')
            } else {
              callback()
            }
          }, required: true, message: '请填写公示时间', trigger: 'blur, change'
        }],
        participant: [{required: true, message: '请填写参与人', trigger: 'blur, change'}],
        people: [{required: true, message: '请填写自评工作组织人员', trigger: 'blur, change'}],
        idFiles: [{
          validator: (rule, value, callback) => {
            if (this.dataToView.idFiles.filter(t => t.field === '4').length < 1) {
              callback('职代会汇报必须上传')
            } else {
              callback()
            }
          },
          required: true,
          trigger: 'change'
        }]
      },
      queryUrl: Api.querySaStdStandardSelfAssessment,
      updateUrl: Api.updateSaStdStandardSelfAssessment,
      saveUrl: Api.saveSaStdStandardSelfAssessment,
      deleteUrl: Api.deleteSaStdStandardSelfAssessment,
      uploadUrl: Api.uploadMongoFile,
      downloading: false,
      batchProcess: 0,
    }
  },
  computed: {
    options: function () {
      return {
        radius: 50,//大小
        duration: 2,//变化时间长度
        circleWidth: 5,//圆环宽度
        pathColors: ['#A2A2A2', '#FA5657'], //圆环 底色和 上面的颜色
        circleLineCap: 'round',//进度条 形状  圆环 或者矩形
        text: function (value) {
          return this.htmlifyNumber(value) + '<span style="font-size: 0.4em;">%</span>';
        },
        textColor: 'rgb(33, 150, 243)'
      }
    }
  },
  async mounted() {
    this.$http.get(Api.queryCodeDetailBySortId + '/SSL-000001', {params: {}}).then((res) => {
      this.stdRankList = res.data.data;
    });
    this.$http.get(Api.queryCodeDetailBySortId + '/SSL-000002', {params: {}}).then((res) => {
      this.stdIfMeeting = res.data.data;
    });
    this.$http.get(Api.queryCodeDetailBySortId + '/SSL-000003', {params: {}}).then((res) => {
      this.stdPublicityMethodList = res.data.data;
    });
    this.$http.get(Api.queryCodeDetailBySortId + '/SSL-000004', {params: {}}).then((res) => {
      this.statusList = res.data.data;
    });
    this.setTableHeight();
    this.query();
  },
  methods: {
    ...pageCommonFunction,
    beforeExport(data) {
      data.orgId = sessionStorage('userId').getObject('userId').companyId
    },
    query() {
      this.dataToQuery.orgId = sessionStorage('userId').getObject('userId').companyId;
      this.queryAjax();
    },
    createEmptyDataToAdd() {
      return {
        orgId: sessionStorage('userId').getObject('userId').companyId,
        selfAssessmentScore: 0,
        id: this.get_uuid(),
        idFiles: [],
      }
    },
    async beforeEditDialogOpen(data) {
      data.row.createUserName = data.row.userName;
      // data.row.companyName = data.row.orgName;
    },
    beforeViewDialogOpen(data) {
      data.row.createUserName = data.row.userName;
      // data.row.companyName = data.row.orgName;
    },
    submit(name) {
      this.dataToView.announceTime = formatDate(new Date(this.dataToView.announceTime), 'yyyy-MM-dd');
      this.submitAjaxValidateField(name);
    },
    async afterDataToViewInit() {
      await this.getFiles1('id', 'SaStdStandardSelfAssessment');
      await this.getFiles2('id', 'picture');
    },
    async getFiles2(filedName, type) {
      if (this.dataToView[filedName]) {
        let url = this.fileUrl + '/' + this.dataToView[filedName] + '/files/' + type
        await this.$http.get(url).then((res) => {
          if (res.data.result == "success") {
            this.$set(this.dataToView, 'id1Files', res.data.data)
            let index = 0;
            res.data.data.forEach(item => {
              this.uploadListPercent[index] = 0;
              this.uploadListVisible[index] = false;
              this.uploadListVisible[item.id] = false;
              index++;
            })
          }
        });
      }
    },
    removeFile1(id, filedName, type) {
      let url = this.fileUrl + '/file/' + id;
      this.$http.delete(url).then((res) => {
        if (type == 'picture') {
          this.getFiles2(filedName, type);
        } else {
          this.getFiles1(filedName, type);
        }
      })
    },
    beforeUpload1(file, filedName, type) {
      let formData = new FormData();
      formData.append("files", file); // 文件对象
      let url = this.fileUrl + '/' + this.dataToView[filedName] + '/files/' + type
      this.$http.post(url, formData).then((res) => {
        if (res.data.result == "success") {
          this.$Message.info("文件上传成功")
          if (type == 'picture') {
            this.getFiles2(filedName, type);
          } else {
            this.getFiles1(filedName, type);
          }
        }
      })
      return false
    },
    deleteData(params) {
      this.deleteDateAjax(params);
    },
    downloadZip() {
      var _this = this;
      _this.downloading = true
      var url = Api.mongoBatchDownload;
      var ids = [];
      var fileNames = [];
      _this.dataTable.forEach(item=>{
        ids.push(item.id)
        fileNames.push(item.orgName + "-" + item.userName + '-' + new Date().getFullYear())
      })
      _this.batchProcess = 0;
      let formData = new FormData();
      formData.append("ids", ids); // 文件对象
      formData.append("fileNames", fileNames); // 文件对象
      _this.$http.post(url, formData, {
        responseType: 'blob',      //告诉服务器我们需要的响应格式
        downloadProgress:function(e){
          _this.batchProcess = 100 * (e.loaded / e.total);
          if(_this.batchProcess == 100){
            _this.downloading = false;
          }
        }
      }).then((res) => {
        // this.$Spin.hide();
        const aLink = document.createElement("a");
        let blob = new Blob([res.data], {
          type: 'application/zip'     //将会被放入到blob中的数组内容的MIME类型
        });
        aLink.href = URL.createObjectURL(blob)
        aLink.download = formatDate(new Date(), 'yyyyMMddhhmmss') + ".zip";
        aLink.click()
        document.body.appendChild(aLink)
      }, function(res){
        _this.$Loading.error();
      })
    }
  }
}
</script>

<style lang='css' scoped>
.demo-upload-list {
  display: inline-block;
  width: 70px;
  height: 70px;
  text-align: center;
  line-height: 70px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  margin-right: 4px;
}

.demo-upload-list img {
  width: 100%;
  height: 100%;
}

.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, .6);
}

.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}

.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
</style>
